<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <!-- jquery是editor.md的依赖,不是这个的一部分,这个是需要重新引入的 -->
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="./picture/p4.png">
        <span>我的博客系统</span>
        <!-- 如何让元素一个在左一个在右,CSS中有一个浮动其实可以做到,但是浮动里面有坑,就不使用了 
            2.两个元素的话可以使用space-between多个就不行了,3.给假如一个没有内容的空白元素进行占位,但是有可能会影响响应式布局 -->
        <div class="spacer">
            <!-- 空白元素 -->
        </div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>
    <!-- 这里的container 作为页面的版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 整个用户信息  -->
            <div class="card">
                <img src="./picture/p5.png" alt="">
                <h3></h3>
                <a href="#">github地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="right">
            <!-- 使用这个div来包裹整个博客的内容 -->
            <div class="blog-content">
                <!-- <h3>我的第一篇博客</h3>
                <div class="date">2022-05-06</div> -->
                <h3></h3>
                <div class="date"></div>
                <!-- 博客正文 这里的透明度路设置一下 -->
                <div id="content" style="opacity: 40%;">

                </div>
                <!-- <p>
                    天，灰蒙蒙。冷雨，淅淅沥沥地下。在风与雨的博弈中，雪最终挣脱天庭的羁绊，以一种绝美的姿态，袅袅娜娜，飘落凡间。
一场经年的雪花，在我热切的期盼中，终于“千呼万唤始出来”。雪花仙子，归去来兮，飘落草木人间，了却前世的一段尘缘。
我立在雪空下，任寒风吹乱我的头发，任雪花撩拨我的思绪。我怀揣一颗虔诚的心，迎接这来自天庭的精灵，感激上苍的悲悯和恩赐，感动生命的灿然和美好。
风牵着雪花，在天地间飘忽不定，如贵妃醉酒般步履凌乱，却风情万种。雪花，一片片，扑簌簌，落在梅心间，落在草丛里，落在湖面上。一夜之间，天地皓首，山河静寂。
记得，从前的雪，总会如期而至，不疾不徐，一下就是好几天。地上积了厚厚的一层雪，像棉被一样裹着油菜、麦苗。孩子们堆雪人、打雪仗，在雪地里疯跑，脸蛋和小手冻得红扑扑的，却乐此不疲。
                </p>
                <p>
                    天，灰蒙蒙。冷雨，淅淅沥沥地下。在风与雨的博弈中，雪最终挣脱天庭的羁绊，以一种绝美的姿态，袅袅娜娜，飘落凡间。
一场经年的雪花，在我热切的期盼中，终于“千呼万唤始出来”。雪花仙子，归去来兮，飘落草木人间，了却前世的一段尘缘。
我立在雪空下，任寒风吹乱我的头发，任雪花撩拨我的思绪。我怀揣一颗虔诚的心，迎接这来自天庭的精灵，感激上苍的悲悯和恩赐，感动生命的灿然和美好。
风牵着雪花，在天地间飘忽不定，如贵妃醉酒般步履凌乱，却风情万种。雪花，一片片，扑簌簌，落在梅心间，落在草丛里，落在湖面上。一夜之间，天地皓首，山河静寂。
记得，从前的雪，总会如期而至，不疾不徐，一下就是好几天。地上积了厚厚的一层雪，像棉被一样裹着油菜、麦苗。孩子们堆雪人、打雪仗，在雪地里疯跑，脸蛋和小手冻得红扑扑的，却乐此不疲。
                </p>
                <p>
                    天，灰蒙蒙。冷雨，淅淅沥沥地下。在风与雨的博弈中，雪最终挣脱天庭的羁绊，以一种绝美的姿态，袅袅娜娜，飘落凡间。
一场经年的雪花，在我热切的期盼中，终于“千呼万唤始出来”。雪花仙子，归去来兮，飘落草木人间，了却前世的一段尘缘。
我立在雪空下，任寒风吹乱我的头发，任雪花撩拨我的思绪。我怀揣一颗虔诚的心，迎接这来自天庭的精灵，感激上苍的悲悯和恩赐，感动生命的灿然和美好。
风牵着雪花，在天地间飘忽不定，如贵妃醉酒般步履凌乱，却风情万种。雪花，一片片，扑簌簌，落在梅心间，落在草丛里，落在湖面上。一夜之间，天地皓首，山河静寂。
记得，从前的雪，总会如期而至，不疾不徐，一下就是好几天。地上积了厚厚的一层雪，像棉被一样裹着油菜、麦苗。孩子们堆雪人、打雪仗，在雪地里疯跑，脸蛋和小手冻得红扑扑的，却乐此不疲。
                </p>
                <p>
                    天，灰蒙蒙。冷雨，淅淅沥沥地下。在风与雨的博弈中，雪最终挣脱天庭的羁绊，以一种绝美的姿态，袅袅娜娜，飘落凡间。
一场经年的雪花，在我热切的期盼中，终于“千呼万唤始出来”。雪花仙子，归去来兮，飘落草木人间，了却前世的一段尘缘。
我立在雪空下，任寒风吹乱我的头发，任雪花撩拨我的思绪。我怀揣一颗虔诚的心，迎接这来自天庭的精灵，感激上苍的悲悯和恩赐，感动生命的灿然和美好。
风牵着雪花，在天地间飘忽不定，如贵妃醉酒般步履凌乱，却风情万种。雪花，一片片，扑簌簌，落在梅心间，落在草丛里，落在湖面上。一夜之间，天地皓首，山河静寂。
记得，从前的雪，总会如期而至，不疾不徐，一下就是好几天。地上积了厚厚的一层雪，像棉被一样裹着油菜、麦苗。孩子们堆雪人、打雪仗，在雪地里疯跑，脸蛋和小手冻得红扑扑的，却乐此不疲。
                </p><p>
                    天，灰蒙蒙。冷雨，淅淅沥沥地下。在风与雨的博弈中，雪最终挣脱天庭的羁绊，以一种绝美的姿态，袅袅娜娜，飘落凡间。
一场经年的雪花，在我热切的期盼中，终于“千呼万唤始出来”。雪花仙子，归去来兮，飘落草木人间，了却前世的一段尘缘。
我立在雪空下，任寒风吹乱我的头发，任雪花撩拨我的思绪。我怀揣一颗虔诚的心，迎接这来自天庭的精灵，感激上苍的悲悯和恩赐，感动生命的灿然和美好。
风牵着雪花，在天地间飘忽不定，如贵妃醉酒般步履凌乱，却风情万种。雪花，一片片，扑簌簌，落在梅心间，落在草丛里，落在湖面上。一夜之间，天地皓首，山河静寂。
记得，从前的雪，总会如期而至，不疾不徐，一下就是好几天。地上积了厚厚的一层雪，像棉被一样裹着油菜、麦苗。孩子们堆雪人、打雪仗，在雪地里疯跑，脸蛋和小手冻得红扑扑的，却乐此不疲。
                </p> -->
            </div>
            
        </div>
    </div>
    <!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
    <script>
        function getBlogDetail(){
            $.ajax({
                
                type: 'get',
                //来到这个页面,url就带上了后面的参数,因此想要这里需要拼接上后面的参数,方便服务器进行查询操作,而这里通过location.search就可以(拿到形如?blogId=1的东西)直接拼接,?也不需要写
                url: 'blog' + location.search,
                
                success: function(body){
                    //此时这里的body内容就是一个js对象了,然后把这个对象的内容加载到页面上就看可以了
                    //由于这里的内容就已经在dom树里面了,因此这里就不需要进行构造; ,直接往里面填就好了
                    //构造标题  
                    let h3 = document.querySelector('.blog-content>h3');
                    h3.innerHTML = body.title;
                    //构造时间
                    let dateDiv = document.querySelector(".date");
                    dateDiv.innerHTML = body.postTime;
                    //构造博客内容
                    // let contentDiv = document.querySelector("#content");
                    // contentDiv.innerHTML = body.content;
                    //但是这里的博客正文可不是一个简单的文本,而是一个带有格式的md编辑器内容
                    //因此这里直接写这些内容是不行的,是要写博客正文的(渲染后的结果),而不是写带有格式的博客文章
                    //因此这里也需要使用editor.md来进行渲染
                    //所以这就不用上面的原始文章写法了
                    //使用editormd里面的对象,其方法就可以把这些进行渲染,markdownToHTML里面有两个参数,第一个表示id=content的HTML标签渲染之后就会把html片段放到这个标签下,第二个是一个对象
                    editormd.markdownToHTML('content',{
                        markdown: body.content
                    });

                }
            });
        }
        getBlogDetail();

       

        //也可以将这个函数封装成一个js文件(common.js),想要引入的话,直接引入这个文件就好了也就可以执行里面的代码了,也可以对登录状态进行检测了
        //在这里再加上一个逻辑,就是通过GET /login这个接口来获取下当前的登录状态
       function getUserInfo(){
           $.ajax({
               type: "get",
               url: "login",
               success: function(body){
                   //当前的body就是一个User对象了,看着对象的userId是不是大于0的,如果大于就表示当前已经登录,如果为0就表示当前未登录
                   if(body.userId && body.userId > 0){
                       //当前已经登录了,就不做处理
                       //虽然这两个函数有吸纳后,但是两个函数调用有先后顺序,但是这两个ajax请求却是同步执行的,第一个ajax发出去之后,不会等响应回来,第二个ajax就发出去了,这也正是ajax名字的含义,
                       //而如果这两个请求的顺序不确定,那就不号进行判定了,因此这里需要手动调整这两个函数的顺序,因此这里就把作者信息的调用放到验证用户信息正确执行里面,就可以保证这两个函数的先后顺序了
                       //那么此时这里就不是并发执行了
                       getAuthorInfo(body);
                       //这里只有两个ajax,这样的套娃还能接收,但是如果请求多了的话,这样的操作就有点丑陋,这样的操作称为"回调地狱"这是非常不优雅的,而在jsES6就引入了Promise可以解决这个问题,而在ES7引入了async和await能够更优雅的解决这个问题,这就是一些语法糖,能够简化代码,但执行的效果还是一样的
                   }else{
                       //当前未登录,需要跳转到登录页面
                       alert("当前您尚未登录,请您登录过后再进行访问");
                       //通过location.assign来进行跳转页面到blog_login.html
                       location.assign("blog_login.html");
                   }
               },
               error: function(){
                    //当前未登录,需要跳转到登录页面
                    alert("当前您尚未登录,请您登录过后再进行访问");
                    //通过location.assign来进行跳转页面到blog_login.html
                    location.assign("blog_login.html");
               }
           });
       }
       getUserInfo();


        //这里就从服务器获得到当前用博客的作者信息
        //此处添加的参数user就是刚才从服务器拿到的当前登录用户的信息
        function getAuthorInfo(user){
           $.ajax({
               type: 'get',
               //这里需要获取一下这个后面的内容:?blogId=5
               url: "authorInfo" + location.search,
               success: function(body){
                   //此时的body就是一个用户对象了,这这个用户对象的信息设置上去就行了,而此处的body就是服务器返回的User对象了就是文章的作者信息
                   //判断一下用户是否存在
                   if(body.username){
                       //如果存在就设置上去
                       let h3 = document.querySelector(".card>h3");
                       h3.innerHTML = body.username;

                       //然后此时再判断当前的作者和登录的用户是不是同一个,如果是同一个的话,就可以在导航栏里面添加一个删除按键
                       if(user.username == body.username){
                           //相等就表示是同一个人,就可以进行删除
                           let navDiv = document.querySelector(".nav");
                           //添加一个a标签
                           let a = document.createElement("a");
                           //此标签的名字是删除
                           a.innerHTML = '删除';
                           //a的请求 路径加上要删除的文章id
                           a.href = "blogDelete" + location.search;
                           //然后再放到这个div里面
                           navDiv.appendChild(a);
                        }
                   }else{
                       //如果不存在就提示错误
                       console.log("获取作者信息失败!" + body.reason);
                   }
               }
           });
       }
       
       
    </script>
</body>
</html>